// DetailsScreen.js
import React from "react";
import { View, Text } from "react-native";
import useRem from "../rem/rem";
let list =[
  {
    id:1,
    name:'医药代表拜访',
    proname:'张三',
    pro:'销售总监',
    classnum:'20',
    Exam:'20',
    class_time:'2小时',
    study:'已学30%',
    ExamNum:'90',
    img1:"https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E9%A6%96%E9%A1%B5/u142.png",
    img2:"https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E5%9C%A8%E7%BA%BF%E5%9F%B9%E8%AE%AD/u261.svg",
  },
  {
    id:2,
    name:'疾病预防',
    proname:'李四',
    pro:'医学部总监',
    classnum:'20',
    Exam:'20',
    ExamNum:'90',
    class_time:'2小时',
    study:'已学30%',
    img1:"https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E9%A6%96%E9%A1%B5/u142.png",
    img2:"https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E5%9C%A8%E7%BA%BF%E5%9F%B9%E8%AE%AD/u261.svg",
  },
  {
    id:3,
    name:'疾病预防',
    proname:'李四',
    pro:'医学部总监',
    classnum:'20',
    Exam:'20',
    ExamNum:'90',
    class_time:'2小时',
    study:'已学30%',
    img1:"https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E5%9C%A8%E7%BA%BF%E5%9F%B9%E8%AE%AD/u244.png",
    img2:"https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E5%9C%A8%E7%BA%BF%E5%9F%B9%E8%AE%AD/u261.svg",
  },
  {
    id:4,
    name:'疾病预防',
    proname:'李四',
    pro:'医学部总监',
    classnum:'20',
    Exam:'20',
    ExamNum:'90',
    class_time:'2小时',
    study:'已学30%',
    img1:"https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E5%9C%A8%E7%BA%BF%E5%9F%B9%E8%AE%AD/u246.png",
    img2:"https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E5%9C%A8%E7%BA%BF%E5%9F%B9%E8%AE%AD/u261.svg",
  },
  {
    id:5,
    name:'疾病预防',
    proname:'李四',
    pro:'医学部总监',
    classnum:'20',
    Exam:'20',
    ExamNum:'90',
    class_time:'2小时',
    study:'已学30%',
    img1:"https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E5%9C%A8%E7%BA%BF%E5%9F%B9%E8%AE%AD/u248.png",
    img2:"https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E5%9C%A8%E7%BA%BF%E5%9F%B9%E8%AE%AD/u261.svg",
  },
]
export default function ClassKao() {
  const {rem} = useRem();

  return (
    <div>
      <div
        style={{
          width: rem(375),
          height: rem(44),
          background: "#fff",
          lineHeight: rem(2),
          fontSize: rem(16),
        }}
      >
        <span style={{fontSize:rem(20)}}>{'<'}</span>我的考试
      </div>
      <div style={{ width: rem(375), height: rem(733), background: "#D1D1D1" ,}}>
      {list.map(t=><div
          style={{
            width: rem(375),
            height: rem(165),
            background: "#FFFFFF",
            marginTop: rem(5),
            display: "flex",
            justifyContent: "space-around",
          }}
        >
          <div style={{ width: rem(120), height: rem(165),position:'relative' }}>
            <img
              src={t.img1}
              style={{ width: rem(120), height: rem(90), marginTop: rem(14) }}
              alt=""
            />
            <img src={t.img2} alt="" style={{ width: rem(30), height: rem(30), marginTop: rem(14),position:'absolute',left:rem(54),bottom:rem(104) }}/>
          </div>
          <div style={{ width: rem(230), height: rem(165) }}>
            <div
              style={{
                width: rem(104),
                height: rem(19),
                fontSize: rem(14),
                fontWeight: "bold",
                marginTop: rem(17),
              }}
            >
              {t.name}
            </div>
            <div
              style={{
                width: rem(166),
                height: rem(16),
                fontSize: rem(12),
                fontWeight: "bold",

                // justifyContent:'left',
                marginTop: rem(6),
                color: "#999999",
              }}
            >
              <div
                style={{
                  width: rem(61),
                  height: rem(16),
                  fontSize: rem(12),
                  fontWeight: "bold",
                  color: "#999999",
                  display: "inline-block",
                }}
              >
                主讲:{t.proname}
              </div>
              <div
                style={{
                  width: rem(60),
                  height: rem(16),
                  fontSize: rem(12),
                  fontWeight: "bold",
                  marginLeft: rem(7),
                  display: "inline-block",
                }}
              >
                {t.pro}
              </div>
            </div>
            <div
              style={{
                width: rem(210),
                height: rem(16),
                fontSize: rem(12),
                fontWeight: "bold",
                // display: "flex",
                // justifyContent: "space-around",
                marginTop: rem(4),
                color: "#999999",
              }}
            >
              <div
                style={{
                  width: rem(85),
                  height: rem(16),
                  marginTop: rem(12)
                }}
              >
                考试得分:{t.ExamNum}
              </div>
              <div
                style={{
                  width: rem(85),
                  height: rem(16),
                 marginTop: rem(12)
                }}
              >
                获得积分:{t.Exam}
              </div>
            </div>
            
            <div
              style={{
                width: rem(206),
                height: rem(40),
                fontSize: rem(12),
                fontWeight: "bold",

                marginTop: rem(13),
              }}
            >
             
              <button
                style={{
                  width: rem(70),
                  height: rem(29),
                  background: "#0079FE",
                  color: "white",
                  border: "0px",
                  fontSize: rem(13),
                  marginLeft: rem(128),
                  marginTop: rem(27),
                }}
              >
                查看考试
              </button>
            </div>
          </div>
        </div>)}
     
      
     
      
      </div>
    </div>
  );
}
